﻿@{
    Layout = "";
        var host = Appsettings.app("BaseFile:HostUrl");
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no">
    <title>孔明棋</title>

    @*<script type="text/javascript" src="ref/jquery.min.js"></script>*@
    <script type="text/javascript" src="@host/lib/jq/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="@host/kongmingqi/jquery.mobile.custom.min.js"></script>


    <!-- <script type="text/javascript" src="ref/game_index.js"></script> -->
    <script type="text/javascript">
 
        //重写requestAnimationFrame
        var $j = jQuery.noConflict();
        var submitresponce;
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.setTimeout;
        })();
        //重写cancelAnimationFrame
        window.cancelAnimationFrame = (function () {
            return window.cancelAnimationFrame ||
                window.webkitCancelAnimationFrame ||
                window.mozCancelAnimationFrame ||
                window.oCancelAnimationFrame ||
                window.msCancelAnimationFrame ||
                window.clearTimeout;
        })();
        var _getvp = document.getElementById('viewport');
        if (_getvp && _getvp.content.indexOf('width=960') >= 0) {
            var _ua = navigator.userAgent.toLowerCase(), _setW = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;
            window.glsysw = _setW > 1136 ? 1136 : (_setW == 961 ? 1136 : (_ua.indexOf('ipad') >= 0 ? 1024 : _setW));
            _getvp.content = 'width=' + window.glsysw + ',user-scalable=yes';
            if (_ua.indexOf('webkit') < 0) {
                _getvp.content += ',uc-user-scalable=yes,target-densitydpi=high-dpi';
            }
            _ua = _setW = null;
        }
        _getvp = null;
        //调出进度条
        function callLoading (method) {
            return;
            var _getLoadingDiv = document.getElementById('loadingDiv');
            if (_getLoadingDiv) {
                if (method == 'close') {
                    document.body.removeChild(_getLoadingDiv);
                }
                else {
                    _getLoadingDiv.style.height = window.innerHeight + 'px';
                }
            }
            else if (method == 'open') {
                _getLoadingDiv = document.createElement('div');
                _getLoadingDiv.id = 'loadingDiv';
                _getLoadingDiv.style.position = 'absolute';
                _getLoadingDiv.style.width = '100%';
                _getLoadingDiv.style.height = window.innerHeight + 'px';
                _getLoadingDiv.style.textAlign = 'center';
                _getLoadingDiv.style.background = '#FFF';
                _getLoadingDiv.style.zIndex = 1000000;
                _getLoadingDiv.style.left = '0px';
                _getLoadingDiv.style.top = '0px';
                _getLoadingDiv.innerHTML = [
                    '<img src="../resource/img/logo.png" style="margin-top:' + ((window.innerHeight - 269) >> 1) + 'px;" />'
                ].join('');
                document.body.appendChild(_getLoadingDiv);
            }
            _getLoadingDiv = null;
        };
        var QueryString = {

            /**
             * 取得查询字符串参数
             * 例：假设查询字符串是?q=javascript&num=10
             * var args=getQueryStringArgs();
             * alert(args["q"]);
             * alert(args["num"]);
             */
            getQueryStringArgs: function () {
                //取得查询字符串并去掉开头的问号
                var qs = (location.search.length > 0 ? location.search.substring(1) : "");

                //保存数据的对象
                var args = {};

                //取得每一项
                var items = qs.split("&");
                var item = null,
                    name = null,
                    value = null;

                //逐个将每一项添加到args对象中
                for (var i = 0; i < items.length; i++) {
                    item = items[i].split("=");
                    name = decodeURIComponent(item[0]);
                    value = decodeURIComponent(item[1]);
                    args[name] = value;
                }

                return args;
            },

            /**
             * 对getQueryStringArgs()方法进行进一步封装，简化调用
             */
            getParameter: function (keyValue) {
                var args = this.getQueryStringArgs();
                if (args[keyValue] != undefined) {
                    return args[keyValue];
                } else {
                    return "";
                }
            }

        };
        var CookieUtil = {

            get: function (name) {
                var cookieName = encodeURIComponent(name) + "=",
                    cookieStart = document.cookie.indexOf(cookieName),
                    cookieValue = null;

                if (cookieStart > -1) {
                    var cookieEnd = document.cookie.indexOf(";", cookieStart);
                    if (cookieEnd == -1) {
                        cookieEnd = document.cookie.length;
                    }
                    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
                }

                return cookieValue;
            },

            set: function (name, value, day, path, domain, secure) {
                var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                if (typeof day == "number") {
                    var expires = new Date();
                    expires.setTime(expires.getTime() + day * 24 * 60 * 60 * 1000);
                    cookieText += "; expires=" + expires.toGMTString();
                }

                if (path) {
                    cookieText += "; path=" + path;
                }

                if (domain) {
                    cookieText += "; domain=" + domain;
                }

                if (secure) {
                    cookieText += "; secure";
                }

                document.cookie = cookieText;
            },

            unset: function (name, path, domain, secure) {
                this.set(name, "", new Date(0), path, domain, secure);
            }

        };


        window.addEventListener('load', function (e) {


            //重置框架
            function _resetFrame () {
                var _getScreenFrame = document.getElementById('screenFrame');
                if (_getScreenFrame) {
                    _getScreenFrame.style.display = 'block';
                    _getScreenFrame.style.width = window.glsysw + 'px';
                    if (!_getScreenFrame.style.height) {
                        _getScreenFrame.style.height = window.innerHeight + 'px';
                    }
                    if (_getScreenFrame.children[0]) {
                        _getScreenFrame.children[0].style.height = _getScreenFrame.style.height;
                    }
                    else {
                        callLoading('open');
                        _getScreenFrame.innerHTML = '<iframe src="' + _getScreenFrame.lang + '" scrolling="no"></iframe>';
                        //监听框架事件
                        _getScreenFrame.children[0].addEventListener('load', function (e) {
                            e.target.style.height = e.target.parentNode.style.height;
                            callLoading('close');
                        }, true);
                    }
                    _getScreenFrame.style.marginTop = ((window.innerHeight - parseInt(_getScreenFrame.style.height)) >> 1) + 'px';
                }
                _getScreenFrame = null;
            }
            //调出翻转提示
            function _callLandscape (desc) {
                var _getLandscapeDiv = document.getElementById('landscapeDiv');
                if (_getLandscapeDiv) {
                    if (desc == 0) {
                        document.body.removeChild(_getLandscapeDiv);
                    }
                    else {
                        _getLandscapeDiv.style.height = window.innerHeight + 'px';
                    }
                }
                else if (desc) {
                    _getLandscapeDiv = document.createElement('div');
                    _getLandscapeDiv.id = 'landscapeDiv';
                    _getLandscapeDiv.style.position = 'absolute';
                    _getLandscapeDiv.style.width = '100%';
                    _getLandscapeDiv.style.height = window.innerHeight + 'px';
                    _getLandscapeDiv.style.textAlign = 'center';
                    _getLandscapeDiv.style.background = '#FFF';
                    _getLandscapeDiv.style.zIndex = 1000001;
                    _getLandscapeDiv.style.left = '0px';
                    _getLandscapeDiv.style.top = '0px';
                    _getLandscapeDiv.innerHTML = [
                        '<img src="../resource/img/orientation-landscape-' + desc + '.png" style="margin-top:' + ((window.innerHeight - 500) >> 1) + 'px;" />'
                    ].join('');
                    document.body.appendChild(_getLandscapeDiv);
                }
                _getLoadingDiv = null;
            }
            //创建顶部功能菜单
            function _createTopMenu () {
                var _getCallMenuBtn = document.getElementById('callMenuBtn'), _getTopMenu = document.getElementById('topMenu');
                if (!_getCallMenuBtn) {
                    _getCallMenuBtn = document.createElement('a');
                    _getCallMenuBtn.id = 'callMenuBtn';
                    _getCallMenuBtn.style.position = 'absolute';
                    _getCallMenuBtn.style.left = '45px';
                    _getCallMenuBtn.style.top = '5px';
                    _getCallMenuBtn.style.zIndex = 99;
                    _getCallMenuBtn.className = 'menuBtn1 radius transition-ease';
                    _getCallMenuBtn.innerHTML = '<span class="menuBtn1-icon"></span>';
                    _getCallMenuBtn.onmousedown = function (e) {
                        _getCallMenuBtn._canDo = true;
                    };
                    _getCallMenuBtn.onmouseup = function (e) {
                        if (!_getCallMenuBtn._canDo) {
                            return false;
                        }
                        _getCallMenuBtn._canDo = false;
                        if (_getCallMenuBtn) {
                            _getCallMenuBtn.style.top = '-40px';
                        }
                        if (_getTopMenu) {
                            _getTopMenu.style.top = '0px';
                        }
                        if (e.preventDefault) {
                            e.preventDefault();
                        }
                    };
                    _getCallMenuBtn.ontouchstart = _getCallMenuBtn.onmousedown;
                    _getCallMenuBtn.ontouchend = _getCallMenuBtn.onmouseup;
                    document.body.appendChild(_getCallMenuBtn);
                }

            }
            window.onresize = function (e) {
                _resetFrame();
                callLoading();
                _callLandscape();
            };
            //初始化函数
            function _init () {
                _resetFrame();
                _createTopMenu();
            }
            _init();
            var _lastDate = Date.now(), _isPause = false, _playTimer, _rafRun, _state = 0, _bodyDesc = document.body.id;
            if (!_playTimer) {
                (_rafRun = function () { //UI界面requestAnimationFrame主循环逻辑
                    var _newDate = Date.now();
                    if ((_newDate - _lastDate) >= 100) {
                        _lastDate = _newDate;
                        if (!_isPause) {
                            switch (_state) {
                                case 0: //正常
                                    if (_bodyDesc == 1) {
                                        if (window.innerWidth > window.innerHeight) {
                                            _callLandscape(_state = 1);
                                        }
                                    }
                                    else if (_bodyDesc == 2) {
                                        if (window.innerWidth < window.innerHeight) {
                                            _callLandscape(_state = 2);
                                        }
                                    }
                                    break;
                                case 1: //处于横屏状态下
                                    if (window.innerWidth <= window.innerHeight) {
                                        _callLandscape(_state = 0);
                                    }
                                    break;
                                case 2: //处于竖屏状态下
                                    if (window.innerWidth > window.innerHeight) {
                                        _callLandscape(_state = 0);
                                    }
                                    break;
                                default:
                                    break;
                            }
                        }
                    }
                    _newDate = null;
                    if (_rafRun)
                        _playTimer = requestAnimationFrame(_rafRun);
                })();
            }
        });
        var DWindow = (function ($) {
            function DWindow (config) {
                $.extend(this, {
                    width: 200,
                    title: '',
                    content: '',
                    showClose: false
                }, config);
                this.$mask = $('<div class="w_mask"></div>');
                this.$panel = $('<div class="w_panel"><div class="w_title">' + this.title + (this.showClose ? '<a class="menuBtn3-icon"></a>' : '') + '</div><div class="w_content">' + this.content + '</div></div>').css({
                    width: this.width,
                    visibility: 'hidden'
                });
                this.$closer = this.$panel.find('.w_title .menuBtn3-icon');
                $(document.body).append(this.$mask, this.$panel);
                this.$panel.css({
                    visibility: 'visible'
                }).hide().fadeIn();
                this._init();
            }
            DWindow.prototype = {
                constructor: DWindow,
                close: function () {
                    this.$mask.fadeOut();
                    this.$panel.fadeOut();
                },
                _init: function () {
                    var that = this;
                    this.$closer.on('click', function () {
                        that.close();
                    });
                },
                show: function () {
                    this.$panel.show();
                    this.$mask.show();
                },
                hide: function () {
                    this.$panel.hide();
                    this.$mask.hide();
                }
            };
            return DWindow;
        }($j));


        //jobs add
        $j(document).ready(function () {
            $j(".return").click(function () {
                $j(".scoreinfo").hide();
            });
            $j(".xuyao").click(function () {
                $j(".weixinshare").show();
            });
            $j(".weixinshare").click(function () {
                $j(this).hide();
            });
        });


        function onOrientation () {
            return $j(document).width() > $j(document).height() ? 'landscape' : 'portrait';
        }
    </script>
    <script type="text/javascript" language="JavaScript">
        var jumpPeg = null;
        var num = 0;
        var pos = [
            [0, 0],
            [0, 2], [0, 3], [0, 4],
            [1, 2], [1, 3], [1, 4],
            [2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6],
            [3, 0], [3, 1], [3, 2], [3, 3], [3, 4], [3, 5], [3, 6],
            [4, 0], [4, 1], [4, 2], [4, 3], [4, 4], [4, 5], [4, 6],
            [5, 2], [5, 3], [5, 4],
            [6, 2], [6, 3], [6, 4]]

        var pegArr = new Array(34);

        var VALID = 1; var FULL = 2; var EMPTY = 4;
        var SAMEROW = 0; var SAMECOL = 0; var LEFT = -1; var RIGHT = 1; var TOP = -1; var BOT = 1;
        var prevId = 0; var inMove = false;
        var idArr = new Array();

        function initScr () {
            num = 0;
            inMove = false;
            var idx = 1;
            var str = '<div id="seg_t">';
            for (var i = 0; i < 6; i++) { str += '<div class="peg_f" id="p_' + idx + '" onClick="touchSpot(' + idx + ');"></div>'; idx++; }
            str += '</div><div id="seg_m">';
            for (var i = 0; i < 10; i++) { str += '<div class="peg_f" id="p_' + idx + '" onClick="touchSpot(' + idx + ');"></div>'; idx++; }
            str += '<div class="peg_h" id="p_' + idx + '" onClick="touchSpot(' + idx + ');"></div>'; idx++;
            for (var i = 0; i < 10; i++) { str += '<div class="peg_f" id="p_' + idx + '" onClick="touchSpot(' + idx + ');"></div>'; idx++; }
            str += '</div><div id="seg_b">';
            for (var i = 0; i < 6; i++) { str += '<div class="peg_f" id="p_' + idx + '" onClick="touchSpot(' + idx + ');"></div>'; idx++; }
            str += '</div>';

            for (var i = 1; i < 34; i++) { pegArr[i] = 1; }; pegArr[17] = 0;
            var o = document.getElementById("pegsolitairebrd"); if (o != null) { o.innerHTML = str; }
            jumpPeg = document.createElement("div");
            jumpPeg.className = "peg_j";
            jumpPeg.style.left = "0px";
            jumpPeg.style.top = "0px";
            jumpPeg.style.visibility = "hidden";
            o.appendChild(jumpPeg);
            document.getElementById("scorenum").innerText = num + "分";
        }


        // function submitfrm () {
        //     var Rankstr = "";
        //     var f = document.getElementById("pegsolitairebrd");
        //     if (f != null) {
        //         var cnt = 0;
        //         for (var k = 1; k < 34; k++) {
        //             if (pegArr[k] == 1) { cnt++; }
        //         }
        //         // dp_submitScore(32 - cnt);
        //         // dp_share(32 - cnt);
        //     }
        // }


        function changeClass (n, c) {
            var o = document.getElementById("p_" + n); if (o != null) { o.className = c; }
        }

        function checkSide (n, roff, coff) {
            var row = pos[n][0] + roff;
            var col = pos[n][1] + coff;
            if (row < 0 || row > 6 || col < 0 || col > 6) { return 0; }
            var id = 0;
            for (var i = 1; i < 34; i++) { if (pos[i][0] == row && pos[i][1] == col) { id = i; break; } }
            if (id == 0) { return 0; }
            var flags = VALID;
            if (pegArr[id] == 1) { flags |= FULL; } else { flags |= EMPTY; }
            return id * 1000 + flags;
        }

        function getJumpableIds (n, arr) {
            while (arr.length > 0) { arr.pop(); }

            var id_1 = checkSide(n, SAMEROW, LEFT); var id_2 = 0;
            if ((id_1 & VALID) && (id_1 & FULL)) {
                id_1 = Math.floor(id_1 / 1000);
                id_2 = checkSide(id_1, SAMEROW, LEFT);
                if ((id_2 & VALID) && (id_2 & EMPTY)) { arr.push([id_1, Math.floor(id_2 / 1000)]); }
            }

            id_1 = checkSide(n, SAMEROW, RIGHT);
            if ((id_1 & VALID) && (id_1 & FULL)) {
                id_1 = Math.floor(id_1 / 1000);
                id_2 = checkSide(id_1, SAMEROW, RIGHT);
                if ((id_2 & VALID) && (id_2 & EMPTY)) { arr.push([id_1, Math.floor(id_2 / 1000)]); }
            }

            id_1 = checkSide(n, TOP, SAMECOL);
            if ((id_1 & VALID) && (id_1 & FULL)) {
                id_1 = Math.floor(id_1 / 1000);
                id_2 = checkSide(id_1, TOP, SAMECOL);
                if ((id_2 & VALID) && (id_2 & EMPTY)) { arr.push([id_1, Math.floor(id_2 / 1000)]); }
            }

            id_1 = checkSide(n, BOT, SAMECOL);
            if ((id_1 & VALID) && (id_1 & FULL)) {
                id_1 = Math.floor(id_1 / 1000);
                id_2 = checkSide(id_1, BOT, SAMECOL);
                if ((id_2 & VALID) && (id_2 & EMPTY)) { arr.push([id_1, Math.floor(id_2 / 1000)]); }
            }
        }

        function touchSpot (n) {
            if (inMove) { return; }
            for (var i = 0; i < idArr.length; i++) { changeClass(idArr[i][1], "peg_h"); }
            if (prevId > 0) {
                if (pegArr[prevId] == 1 && pegArr[n] == 0) {
                    for (var i = 0; i < idArr.length; i++) {
                        if (idArr[i][1] == n) {
                            startMove(prevId, idArr[i][0], idArr[i][1]);
                        }
                    }
                }
            }
            while (idArr.length > 0) { idArr.pop(); }


            if (pegArr[n] == 0) { return; }

            showJumpPeg(n);

            getJumpableIds(n, idArr);
            if (idArr.length == 0) { prevId = 0; setTimeout("hideJumpPeg(" + n + ")", 100); }
            else if (idArr.length == 1) {
                startMove(n, idArr[0][0], idArr[0][1]);
                idArr.pop();
            }
            else {
                for (var i = 0; i < idArr.length; i++) { changeClass(idArr[i][1], "peg_t"); }
                prevId = n;
            }
        }

        function startMove (frm, mid, to) {
            inMove = true;
            changeClass(frm, "peg_h"); pegArr[frm] = 0;
            jumpPeg.style.className = "peg_m";
            moveSlow(frm, mid, to);
        }

        function isGameOver () {
            var tstArr = new Array(); var done = true;
            for (var k = 1; k < 34 && done; k++) {
                if (pegArr[k] == 1) { getJumpableIds(k, tstArr); if (tstArr.length > 0) { done = false; } }
            }
            return done;
        }

        function endMove (frm, mid, to) {
            changeClass(mid, "peg_h"); pegArr[mid] = 0;
            changeClass(to, "peg_f"); pegArr[to] = 1;
            hideJumpPeg();
            jumpPeg.style.className = "peg_j";
            num++;
            document.getElementById("scorenum").innerText = num + "分";
            if (isGameOver()) {
                // submitfrm();
                var str = ""; str += ('<div style="float:right;"><div class="btntxt">貌似没路走了:)&nbsp;&nbsp;</div><div id="lbtn"></div><div id="mbtn" onClick="initScr();">确定</div><div id="rbtn"></div></div>');
                var o = document.getElementById("btnbrd"); if (o != null) { o.innerHTML += str; }
            }
            else { inMove = false; }
        }

        function moveSlow (n0, n1, n2) {
            var xpos = getLeft(n2);
            var ypos = getTop(n2);
            var xsign = 1; var ysign = 1; //plus or minus

            var x = parseInt(jumpPeg.style.left);
            var y = parseInt(jumpPeg.style.top);
            var off_x = xpos - x; if (off_x < 0) { xsign = -1; }; if (Math.abs(off_x) > 5) { off_x = 5 * xsign; }
            var off_y = ypos - y; if (off_y < 0) { ysign = -1; }; if (Math.abs(off_y) > 5) { off_y = 5 * ysign; }
            x += off_x; y += off_y;
            jumpPeg.style.left = x + 'px'; jumpPeg.style.top = y + 'px';
            if ((x != xpos) || (y != ypos)) { setTimeout("moveSlow(" + n0 + "," + n1 + "," + n2 + ")", 10); }
            else { endMove(n0, n1, n2); }
        }

        function showJumpPeg (n) {
            jumpPeg.style.left = getLeft(n) + 0 + "px";
            jumpPeg.style.top = getTop(n) - 6 + "px";
            jumpPeg.style.visibility = "visible";
        }

        function hideJumpPeg () {
            jumpPeg.style.visibility = "hidden";
        }

        function getLeft (n) {
            return 19 + 41 * pos[n][1];
        }

        function getTop (n) {
            return 70 + 41 * pos[n][0];
        }


    </script>
    <style>
        body {
            text-align: center;
            background: #000000;
            padding: 0;
            border: 0;
            height: 100%;
        }

        html {
            -ms-touch-action: none;
            /* Direct all pointer events to JavaScript code. */
        }

        .sbgshow {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            font-size: 30px;
            line-height: 1.7em;
            background: rgba(0, 0, 0, 0.85);
        }

        .sbgshow .arron {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 100px;
            height: 100px;
            background: url(@host/kongmingqi/images/arron.png) no-repeat;
            background-size: 100px 100px;
        }

        .sbgshow p {
            padding-top: 78px;
        }

        .sbg {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            font-size: 26px;
            line-height: 1.7em;
            background: rgba(0, 0, 0, 0.85);
        }

        .sbg .arron {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 100px;
            height: 100px;
            background: url(@host/kongmingqi/images/arron.png) no-repeat;
            background-size: 100px 100px;
        }

        .sbg p {
            padding-top: 78px;
        }

        .btn {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 5px;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            background-color: #3498db;
            color: #fff;
            display: inline-block;
            margin-right: 10px;
            margin-top: 3px;
        }

        .aliForPc {
            display: none;
            position: fixed;
            top: 5px;
            right: 5px;
            width: 200px;
            height: 230px;
            overflow: hidden;
            z-index: 99999;
        }
    </style>
    <style>
        body {
            margin: 0px;
        }

        #scene {
            width: 320px;
            height: 356px;
            margin-top: 1px;
            background: #000000;
        }

        #pegsolitairebrd {
            float: left;
            width: 320px;
            margin-top: 4px;
            height: 320px;
            /* background: url(images/peg_board.png) no-repeat; */
            background: url(@host/kongmingqi/images/peg_board.png) no-repeat;
        }

        #seg_t {
            float: left;
            width: 123px;
            height: 82px;
            margin-left: 98px;
            margin-top: 16px;
        }

        #seg_m {
            float: left;
            width: 287px;
            height: 123px;
            margin-left: 16px;
        }

        #seg_b {
            float: left;
            width: 123px;
            height: 82px;
            margin-left: 98px;
        }

        .peg_h {
            float: left;
            width: 35px;
            height: 35px;
            margin: 3px;
            background: url(@host/kongmingqi/images/peg_hole.png) no-repeat;
        }

        .peg_f {
            float: left;
            width: 35px;
            height: 35px;
            margin: 3px;
            background: url(@host/kongmingqi/images/peg_mrbl.png) no-repeat;
        }

        .peg_t {
            float: left;
            width: 35px;
            height: 35px;
            margin: 3px;
            background: url(@host/kongmingqi/images/peg_hint.png) no-repeat;
        }

        .peg_m {
            position: absolute;
            width: 35px;
            height: 35px;
            background: url(@host/kongmingqi/images/peg_mrbl.png) no-repeat;
        }

        .peg_j {
            position: absolute;
            width: 35px;
            height: 40px;
            background: url(@host/kongmingqi/images/peg_jmp.png) no-repeat;
        }

        #btnbrd {
            float: left;
            height: 36px;
            width: 320px;
            background: #400000;
        }

        .btntxt {
            float: left;
            font-family: verdana, arial, helvetica;
            font-size: 16px;
            color: #ffffff;
            padding-top: 8px;
        }
    </style>
</head>

<body>
    <div id="header">
        <div style="color: blue;vertical-align: bottom;font-weight: bold;padding-top: 10px;" id="scorenum">0分</div>
    </div>

    <div id="scene">
        <div id="pegsolitairebrd">
            <div id="seg_t">
                <div class="peg_f" id="p_1" onclick="touchSpot(1);"></div>
                <div class="peg_f" id="p_2" onclick="touchSpot(2);"></div>
                <div class="peg_f" id="p_3" onclick="touchSpot(3);"></div>
                <div class="peg_f" id="p_4" onclick="touchSpot(4);"></div>
                <div class="peg_f" id="p_5" onclick="touchSpot(5);"></div>
                <div class="peg_f" id="p_6" onclick="touchSpot(6);"></div>
            </div>
            <div id="seg_m">
                <div class="peg_f" id="p_7" onclick="touchSpot(7);"></div>
                <div class="peg_f" id="p_8" onclick="touchSpot(8);"></div>
                <div class="peg_f" id="p_9" onclick="touchSpot(9);"></div>
                <div class="peg_f" id="p_10" onclick="touchSpot(10);"></div>
                <div class="peg_f" id="p_11" onclick="touchSpot(11);"></div>
                <div class="peg_f" id="p_12" onclick="touchSpot(12);"></div>
                <div class="peg_f" id="p_13" onclick="touchSpot(13);"></div>
                <div class="peg_f" id="p_14" onclick="touchSpot(14);"></div>
                <div class="peg_f" id="p_15" onclick="touchSpot(15);"></div>
                <div class="peg_f" id="p_16" onclick="touchSpot(16);"></div>
                <div class="peg_h" id="p_17" onclick="touchSpot(17);"></div>
                <div class="peg_f" id="p_18" onclick="touchSpot(18);"></div>
                <div class="peg_f" id="p_19" onclick="touchSpot(19);"></div>
                <div class="peg_f" id="p_20" onclick="touchSpot(20);"></div>
                <div class="peg_f" id="p_21" onclick="touchSpot(21);"></div>
                <div class="peg_f" id="p_22" onclick="touchSpot(22);"></div>
                <div class="peg_f" id="p_23" onclick="touchSpot(23);"></div>
                <div class="peg_f" id="p_24" onclick="touchSpot(24);"></div>
                <div class="peg_f" id="p_25" onclick="touchSpot(25);"></div>
                <div class="peg_f" id="p_26" onclick="touchSpot(26);"></div>
                <div class="peg_f" id="p_27" onclick="touchSpot(27);"></div>
            </div>
            <div id="seg_b">
                <div class="peg_f" id="p_28" onclick="touchSpot(28);"></div>
                <div class="peg_f" id="p_29" onclick="touchSpot(29);"></div>
                <div class="peg_f" id="p_30" onclick="touchSpot(30);"></div>
                <div class="peg_f" id="p_31" onclick="touchSpot(31);"></div>
                <div class="peg_f" id="p_32" onclick="touchSpot(32);"></div>
                <div class="peg_f" id="p_33" onclick="touchSpot(33);"></div>
            </div>
            <div class="peg_j" style="left: 0px; top: 0px; visibility: hidden;"></div>
        </div>
        <div id="btnbrd" style="margin-top:5px">
            <div id="scorenum"></div>
        </div>
        <div class="btn" onclick="initScr();">重新开始</div>
    </div>
    <script type="text/javascript">
        initScr();
        window.scrollTo(0, 1);
    </script>

</body>

</html>